<template>
	<div id="app">
		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/alarmmessage' }">报警消息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<hr />
		<el-row :gutter="5" type="flex" justify="space-between" align="middle">
			<!-- 左边的报警设置 -->
			<el-col :span="4">
				<span>报警设置</span>
			</el-col>

			<!-- 右边的表单 -->
			<el-col :span="20">
				<el-form ref="form" :model="form" label-width="100px" style="margin-bottom: 10px;">
					<el-row :gutter="5" type="flex" justify="end" align="middle">
						<el-col :span="6">
							<el-form-item>
								<el-input placeholder="请输入关键字" v-model="form.keyword"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="5" type="flex" justify="end" align="middle">
						<el-col :span="6">
							<el-form-item>
								<el-button type="primary" size="mini" @click="ShowHouse">查询</el-button>
								<el-button size="mini" @click="resetForm">取消</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row :gutter="5" type="flex" justify="end" align="middle">
					<el-col :span="3">
						<el-button type="success" size="mini" @click="addNew">新增</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="warning" size="mini" @click="editSelected">编辑选中项</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="danger" size="mini" @click="importData">导入</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="danger" size="mini" @click="exportData">导出</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="danger" size="mini" @click="deleteSelected">删除选中项</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<br />
		<hr />


		<el-dialog title="充电站" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">
			
			
			
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>







		<!-- 添加报警设置的对话框 -->
		<el-dialog title='新增报警设置' :visible.sync="dialogVisible" width="65%" :before-close="handleClose">
			<el-form ref="formm" :model="formm" label-width="80px">
				<el-form-item label="报警名称">
					<el-input v-model="formm.setName"></el-input>
				</el-form-item>

				<el-form-item label="活动性质">
					<el-checkbox-group v-model="formm.type">
						<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
						<el-checkbox label="地推活动" name="type"></el-checkbox>
						<el-checkbox label="线下主题活动" name="type"></el-checkbox>
						<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="活动形式">
					<el-input type="textarea" v-model="formm.desc"></el-input>
				</el-form-item>
				<el-form-item label="关联充电站">
					<div>
						<el-button type="primary" size="mini" @click="addDomain">+</el-button>
						<el-button type="primary" size="mini" @click="clear_btn('dynamicValidateForm')">—</el-button>
						<el-button type="primary" size="mini"
							@click="submitForm('dynamicValidateForm')">存为模板</el-button>
					</div>


					<div>
						<template>
							<el-table :data="tableData1" border style="width: 100%">
								<el-table-column prop="date" label="日期" width="180">
								</el-table-column>
								<el-table-column prop="name" label="姓名" width="180">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
								<el-table-column label="操作" width="250">
									<template slot-scope="scope">
										<el-button type="danger" size="small"
											@click="handleDelete(scope.row)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</div>


				</el-form-item>
				<el-form-item label="关联充电桩">
					<el-input v-model="formm.chargerNames"></el-input>
				</el-form-item>
				<el-form-item label="报警级别">
					<el-select v-model="formm.setLevel" placeholder="请选择报警级别">
						<el-option label="严重" value="1"></el-option>
						<el-option label="紧急" value="2"></el-option>
						<el-option label="一般" value="3"></el-option>
					</el-select>
				</el-form-item>
				<div class="btnTool" style="text-align:right;">

				</div>


				<el-form-item>
					<el-button type="primary" @click="onSubmit">立即创建</el-button>
					<el-button @click="dialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>




		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="序号" prop="setNumber" width="80"></el-table-column>
			<el-table-column label="报警名称" prop="setName"></el-table-column>
			<el-table-column label="关联充电站" prop="stationNames"></el-table-column>
			<el-table-column label="关联充电桩" prop="chargerNames"></el-table-column>
			<el-table-column label="报警级别" prop="setLevel" width="120">
				<template slot-scope="scope">
					{{scope.row.setLevel==1?'严重':scope.row.setLevel==2?'紧急':'一般'}}
				</template>
			</el-table-column>

			<el-table-column label="当前状态" prop="setFlag" width="120">
				<template slot-scope="scope">
					{{scope.row.setFlag==1?'启用':'禁用'}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="250">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
					<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDisable(scope.row)">禁用</el-button>
					<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>



		<div>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	// import { findAlarmSettings } from '@/api/alarm/alarmsettings/Alarmsettings'

	import {
		findAllAlarmSettings
	} from '@/api/alarm/alarmsettings/Alarmsettings.js';
	export default {
		data() {
			return {
				form: {
					keyword: ''
				},
				formm: {
					setName: '',
					type: [],
					desc: '',
					stationNames: '',
					chargerNames: '',
					setLevel: ''
				},
				exampleData: {
					setName: '示例报警名称',
					type: ['美食/餐厅线上活动', '地推活动'],
					desc: '这是一个示例描述，可以在这里输入更多的细节。',
					stationNames: '充电站A, 充电站B',
					chargerNames: '充电桩1, 充电桩2',
					setLevel: '2'
				},
				originalTableData: [],
				tableData: [], // 用于显示的表格数据
				tableData1: [],
				tableData2: [],

				selectedRows: [], // 选中的行
				pageNum: 1,
				pageSize: 10,
				total: 0,
				dialogVisible: false,
			};
		},




		methods: {


			onSubmit() {
				if (this.form.name) {
					// 提交表单数据到服务器
					axios.post('http://localhost:9696/bdc/addAlarmSetting', this.form)
						.then(res => {
							if (res.data.success) {
								this.$message.success("创建成功");
								this.dialogVisible = false;
								this.initData();
							} else {
								this.$message.error("创建失败");
							}
						})
						.catch(err => {
							console.error(err);
							this.$message.error("创建失败");
						});
				} else {
					this.$message.error("请填写活动名称");
				}
			},

			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},


			addNew() {
				console.log('新增功能');
				// 使用示例数据填充表单
				Object.assign(this.formm, this.exampleData);
				this.dialogVisible = true;
			},





			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.ShowHouse();
			},

			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				this.ShowHouse();
			},



			ShowHouse: function() {
				findAllAlarmSettings(this.pageNum, this.pageSize, this.form)
					.then(res => {
						console.log(res.data);
						this.originalTableData = res.data.list;
						this.total = res.data.total;
						this.pageNum = res.data.pageNum;
						this.pageSize = res.data.pageSize;
						this.tableData = [...this.originalTableData];
					})
					.catch(err => {
						console.error(err);
						this.$message.error("获取数据失败");
					});
			},




			addNew() {
				console.log('新增功能');
				this.dialogVisible = true;
			},

			editSelected() {
				console.log('编辑选中项功能');
				if (this.selectedRows.length === 1) {
					const row = this.tableData.find(item => item.id === this.selectedRows[0]);
					Object.assign(this.form, row);
					this.dialogVisible = true;
				} else if (this.selectedRows.length > 1) {
					this.$message.error("你选择的记录多了，目前只支持1条记录");
				} else {
					this.$message.error("请选择你要修改的记录");
				}
			},

			importData() {
				console.log('导入数据功能');
			},

			exportData() {
				console.log('导出数据功能');
			},

			deleteSelected() {
				if (this.selectedRows.length === 0) {
					this.$message.error("至少选中一条数据");
				} else {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post('http://localhost:9696/bdc/deleteAlarmSettings', {
								ids: this.selectedRows
							})
							.then(res => {
								if (res.data.success) {
									this.$message.success("删除成功");
									this.initData();
								} else {
									this.$message.error("删除失败");
								}
							})
							.catch(err => {
								console.error(err);
								this.$message.error("删除失败");
							});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},

			handleView(row) {
				console.log(`查看按钮被点击，行数据: `, row);
			},

			handleEdit(row) {
				console.log(`编辑按钮被点击，行数据: `, row);
			},

			handleDisable(row) {
				console.log(`禁用按钮被点击，行数据: `, row);
			},

			handleDelete(row) {
				console.log(`删除按钮被点击，行数据: `, row);
			},

			resetForm() {
				this.form.keyword = '';
			},

			filterTableData() {
				if (!this.form.keyword) {
					this.tableData = [...this.originalTableData];
				} else {
					this.tableData = this.originalTableData.filter(row =>
						row.setName.includes(this.form.keyword) ||
						row.stationNames.includes(this.form.keyword) ||
						row.chargerNames.includes(this.form.keyword)
					);
				}
				console.log('Filtered tableData:', this.tableData); // 确认过滤后的数据
			},

			handleSelectionChange(selection) {
				this.selectedRows = selection.map(item => item.id);
			},

			initData() {
				this.ShowHouse();
			}
		},
		created() {
			this.ShowHouse();
		}
	};
</script>


<style scoped>
	.el-row {
		margin-bottom: 5px;
		/* 减少行间距 */
	}

	/* 如果需要进一步缩小按钮和输入框的大小 */
	.el-input__inner,
	.el-button {
		font-size: 12px;
		/* 调整字体大小 */
		padding: 4px 8px;
		/* 调整内边距 */
	}

	/* 减小表单项之间的间距 */
	.el-form-item {
		margin-bottom: 5px;
	}
</style>